<template>
    <div class="mode">
        <div class="box">
            <img class="banner" :src="imgUrl" alt="">
        </div>
        <div class="box">
            <div class="title">{{ title }}</div>
            <div class="list">
                <div class="item" v-for="(item, index) in list" :key="index">
                    <div class="flex-a">
                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748.png" v-if="index == 0" alt="">
                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_1.png" v-if="index == 1" alt="">
                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_2.png" v-if="index == 2" alt="">
                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141748_3.png" v-if="index == 3" alt="">
                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749.png" v-if="index == 4" alt="">
                        <img src="https://cxj.szzkba.cn/upload/i/2024/07/02/141749_1.png" v-if="index == 5" alt="">
                        <span :class="'c' + index">{{ item.projectInfo }}</span>
                    </div>
                    <div class="info">{{ '￥' + item.price + '/' + item.rule + '分钟' }}</div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="tabs">
                <nut-tabs v-model="tab">
                    <nut-tab-pane title="项目详情" pane-key="1"></nut-tab-pane>
                    <nut-tab-pane title="预定须知" pane-key="2"></nut-tab-pane>
                </nut-tabs>
            </div>
            <div class="text" v-if="tab == 1">
                {{ info }}
            </div>
            <div class="text" v-if="tab == 2">
                尊敬的用户，欢迎您通过万必联向服务提供方购买服务项目，但您下单前，请仔细阅读以下须知：

                1.万必联并非您所选择服务的提供者，万必联仅依照《用户协议》等的约定向您展示服务提供方及承包其服务项目的自然人或个体工商户的有关信息。

                2.服务提供者对于不正当、不合理的行为和要求，有权拒绝服务，如肢体接触、言语侮辱、劝酒等行为，服务提供者及相关方将保留追究有关人员法律责任，且该订单金额概不退还。

                3.服务提供者未接单或者未出发，客户取消订单，万必联将协调服务提供方全额退款。

                4.服务提供者出发后服务开始前，因客户原因取消订单，客户需支付服务提供者往返车费，并以50元作为空单费补偿。

                5.服务开始后，因用户个人原因提前终止服务的，项目服务费不予退还。

                6.您下单需收取服务提供方出行的往返交通费（一公里内免费)。

                7.禁止服务提供方私自线下接单，您发现该情况后可向我们反馈，我们查实后将向您奖励500元。

                8.服务提供者到达服务地址后，若联系不上您，会等待30分钟；如30分钟后仍无法联系上将自行离开，该订单自动取消，订单部分金额返还，但往返车费不予退还，一公里内（免往返车费）则扣除50元空单费。

                9.请您不要随意透露个人信息，如真实姓名、电话号码、家庭住址等。

                10.服务场所须选择在公共场所：在公共场所或者人多的地方相见，避免在荒僻或者人烟稀少等难以保障您安全的区域或场所享受服务或提供服务。

                11.请您注意文明言行：在享受服务与提供服务的过程中，礼貌、友好交流，不得侮辱、辱骂服务提供者或服务需求者，不得有不当肢体接触等。

                12.请您防范网络诈骗：谨防不法分子利用平台进行网络诈骗，禁止服务提供者与服务需求者线下接单、交易，平台不保障线下交易的任何安全及风险。

                13.违规违法投诉：平台坚决抵制一切违法行为，如果在使用万必联过程中遇到任何违规违法问题，及时向平台投诉，以便于我们及时处理和解决。

                14.平台设有一键报警系统，如您的人身财产安全受到威胁时，请直接点击该图标并拨打报警电话。严禁从事涉黄、涉毒、涉赌等违法犯罪活动。

                15、免责声明：您们在服务过程中服用任何对身体造成危害及造成情绪失控的产品（如吸毒、饮酒等）或从事有违公序良俗或法律法规规定的行为时，视为您们严重违约，平台方有权立即终止您继续使用平台服务的权利，同时保留追究您们法律责任的权利。
            </div>
        </div>
        <div class="btn">
            <nut-button color="#2B35FA" @click="jumpTo('/packageA/pages/order/index?name=orderPage')">立即预约</nut-button>
        </div>
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Left } from '@nutui/icons-vue-taro';
import { reactive, toRefs, onMounted } from 'vue';
import { getIndexDetail } from '../../../../api/index'
export default {
    components: {
        Left,
    },
    setup() {
        const data = reactive({
            id: '',
            list: [
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/02/141748.png',
                    level: '小白',
                    info: '￥120/60分钟'
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/02/141748_1.png',
                    level: '初级',
                    info: '￥130/60分钟'
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/02/141748_2.png',
                    level: '中级',
                    info: '￥140/60分钟'
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/02/141748_3.png',
                    level: '高级',
                    info: '￥150/60分钟'
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/02/141749.png',
                    level: '特级',
                    info: '￥160/60分钟'
                },
                {
                    url: 'https://cxj.szzkba.cn/upload/i/2024/07/02/141749_1.png',
                    level: '明星',
                    info: '￥170/60分钟'
                }
            ],
            tab: 1,
            info: '',
            title: '',
            imgUrl: ''
        });
        onMounted(() => {
            const router = useRouter();
            if (router.params.id) {
                data.id = router.params.id
                detail(router.params.id)
            }
        })
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path });
        }
        const detail = (id) => {
            getIndexDetail({ ID: id }).then(res => {
                if (res.code == 0) {
                    Taro.setNavigationBarTitle({
                        title: res.data.repageSetting.project_Name
                    })
                    data.list = res.data.repageSetting.ProjectInfos
                    data.info = res.data.repageSetting.prj_info
                    data.title = res.data.repageSetting.project_Name
                    data.imgUrl = res.data.repageSetting.remark
                }
            })
        }
        return {
            ...toRefs(data), jumpTo, detail
        }
    }
};
</script>


<style lang="scss">
.mode {
    background: #F5F5F5;

    .box {
        width: 94%;
        margin: 0 auto 20rpx;
        background: #fff;
        border-radius: 20rpx;

        .banner {
            width: 100%;
            // float: left;
            border-radius: 20rpx;
        }

        .title {
            padding: 20rpx 0 20rpx 20rpx;
            font-size: 30rpx;
            text-align: left;
            font-weight: bold;
            border-bottom: 1rpx solid #EEEEEE;
        }

        .list {
            padding: 30rpx 20rpx;
            box-sizing: border-box;

            .item {
                display: inline-block;
                width: 33.33%;
                box-sizing: border-box;
                margin-bottom: 20rpx;

                span {
                    font-size: 24rpx;
                    margin-left: 10rpx;
                    text-align: center;
                    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
                    padding-left: 30rpx !important;
                    background: #6574AB;
                    color: #EBF7FF;
                    padding: 0 20rpx;
                    border-radius: 4rpx;

                }

                .c0 {
                    background: #6574AB;
                }

                .c1 {
                    background: #007DC4;
                }

                .c2 {
                    background: #7B1DD3;
                }

                .c3 {
                    background: #EB5B00;
                }

                .c4 {
                    background: #FD5131;
                }

                .c5 {
                    background: #F61C36;
                }

                img {
                    width: 80rpx;
                    height: 80rpx;
                }

                .info {
                    display: inline-block;
                    width: 92%;
                    border-radius: 10rpx;
                    background: #F5F5F5;
                    height: 60rpx;
                    line-height: 60rpx;
                    font-size: 26rpx;
                    text-align: center;
                }
            }
        }

        .tabs {
            font-size: 30rpx;
            text-align: center;
            border-bottom: 1rpx solid #EEEEEE;

            .nut-tabs__content {
                display: none;
            }
        }

        .text {
            padding: 20rpx;
            font-size: 26rpx;
            line-height: 46rpx;
            padding-bottom: 50rpx;
            text-align: justify;
            margin-bottom: 50rpx;
            height: 2000rpx;
        }
    }

    .btn {
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;
        padding: 20rpx;
        width: 100%;
        box-sizing: border-box;

        .nut-button {
            width: 100%;
            margin: 0 auto;
            font-size: 32rpx;
            font-weight: bold;
            color: #fff;
        }
    }
}
</style>